<template>
	<div v-if="loading">数据加载中...</div>
	<div v-else>
		<div v-if="error">网站报错：{{ error }}</div>
		<div v-else>
			<van-tabs animated>
				<van-tab v-for="v in tab" :title="v.title" :key="v.id">
					<ListItemComp 
						v-for="item in v.list" 
						:key="item.id" 
						:id="item.id"
						:urls="item.urls"
						:desc="item.desc"
						:auther="item.auther"
						:date="item.date"
						:read="item.read"
						:type="item.type"
						@click="$router.push('/post/' + item.id)"
					/>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { fetchTabList } from '@/api';
import { onMounted, ref } from 'vue'
import ListItemComp from '@/components/listItem/indexView.vue'

interface TabItem {
	"id": string,
	"title": string,
	"list": ListItem[],
}

interface ListItem {
	id: string,
	"type": "a" | "b" | "c",
	"urls": string[],
	desc: string,
	auther: string,
	"read": number,
	date: string,
}
const tab = ref<TabItem[]>([])

const loading = ref(true)
const error = ref('')
const fetchList = async () => {
	loading.value = true;
	try {
		const resp = await fetchTabList();
		tab.value = resp.data.data
		loading.value = false
		console.log(resp.data.data)
	} catch (e: any) {
		loading.value = false
		error.value = e.message
	}
}
onMounted(() => {
	fetchList()
})

</script>